<template>
  <view class="footer" v-if="list.length > 0">
    <view class="all-checked">
      <view class="icon">
        <u-checkbox-group @change="checkedAll">
          <u-checkbox
            :checked="allSelected"
            :activeColor="activeColor"
            iconSize="16px"
            size="20px"
            shape="circle"
            label=" "
            labelSize="0"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="sum">已选({{totalQuantity}})</view>
    </view>
    <view class="right">
      <view class="price">
        <text>￥{{ totalPrice }}</text>
      </view>
      <view class="btn" @click="goOrder">去结算</view>
    </view>
  </view>
</template>

<script>
import color from '../../../../config/color'
import base64 from '../../../../util/base64'

export default {
  props: ['list'],
  computed: {
    // 是否全选
    allSelected() {
      return this.list.every(x => x.selected)
    },
    // 总数量
    totalQuantity() {
      const selected = this.list.filter(x => x.selected)
      let total = 0
      selected.forEach(x => {
        total += +x.quantity
      })
      return +total
    },
    // 总金额
    totalPrice() {
      const selected = this.list.filter(x => x.selected)
      let price = 0
      selected.forEach(x => {
        price += +x.quantity * x.price
      })
      return +price.toFixed(2)
    }
  },
  data() {
    return {
      activeColor: color.main_color
    }
  },
  methods: {
    // 全选
    checkedAll() {
      const v = !this.allSelected
      this.$emit('allSelected', v)
    },
    // 去结算
    goOrder() {
      if (this.totalPrice <= 0 && this.totalQuantity === 0) {
        return uni.showToast({
          title: '请选择要购买的商品',
          icon: 'none'
        })
      }
      const params = base64.encodeUrl({ cart: true })
      uni.navigateTo({
        url: `/sub_main/order/index?params=${params}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  border-top: 1rpx solid $background_color;
  background: white;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  // 模拟器显示有问题
  z-index: 9999999;
  //bottom: calc(102rpx + constant(safe-area-inset-bottom));
  // 苹果安全区
  bottom: calc(102rpx + env(safe-area-inset-bottom));
  //bottom: 102rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .all-checked {
    width: 300rpx;
    padding-left: 30rpx;
    display: flex;
    align-items: center;
  }
  .right {
    flex: 1;
    display: flex;
    .btn {
      width: 140rpx;
      font-size: 28rpx;
      background: $main_color;
      text-align: center;
      color: white;
    }
    .price {
      flex: 1;
      text-align: right;
      padding-right: 20rpx;
      color: red;
      font-size: 32rpx;
      font-weight: 700;
    }
  }
}
</style>
